<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link href="../../static/dish/css/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../../static/dish/js/jquery.js"></script>

    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../../static/user/css/font.css">
    <link rel="stylesheet" href="../../static/user/css/font.css">
    <link rel="stylesheet" href="../../static/user/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="../../static/user/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../static/user/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9-->
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <script language="javascript">
        $(function(){
            //导航切换
            $(".imglist li").click(function(){
                $(".imglist li.selected").removeClass("selected")
                $(this).addClass("selected");
            })
        })
    </script>

    <style>
        #showImg {
            width: 168px;
            height: 120px;
        }

        .but {
            width: 35px;
            height: 27px;
            border: 2px solid antiquewhite;
        }
    </style>
</head>


<body>

<div class="place">
    <span>位置：</span>
    <ul class="placeul">
        <li><a href="#">首页</a></li>
        <li><a href="#">菜单</a></li>
        <li><a href="/dish-order/dishOrderUI">后台订单</a></li>
    </ul>
</div>


<div class="rightinfo">
    <div class="tools">
        <ul class="toolbar">
            <li class="click">
                <button onclick="submitOrder()">
                    <span><img src="../../static/dish/images/t04.png"/>提交订单</span></button>
            </li>
        </ul>
        <ul class="toolbar">
            <div class="layui-row" style="display: inline">
                <form class="layui-form layui-col-md12 x-so">
                    <input type="text" placeholder="请输入菜名查询" id="menuName" autocomplete="off" class="layui-input">
                    <button class="layui-btn" type="button" onclick="queryByName()"><i class="layui-icon">&#xe615;</i></button>
                </form>
            </div>
        </ul>
        <ul class="toolbar1">
            <li class="click">
                <button onclick="x_admin_show('添加菜系' , '/dish/dishAddUI', 400, 300)">
                    <span><img src="../../static/dish/images/t01.png"/>添加菜</span></button>
            </li>
        </ul>
    </div>

    <hr>
    <ul class="imglist" id="menu">
    </ul>
</div>
</div>
</body>

<script>
    let arr = [];
    $(document).ready(init())

    function init() {
        queryAll();
    }

    function queryAll() {
        //    做ajax请求
        $.ajax({
            url: 'list',
            dataType: 'json',
            type: 'post',
            //同步
            async: false,
            success: function (data) {
                let dishList = data.dishList;
                localStorage.setItem('dishList', JSON.stringify(dishList));
                for(let i = 0; i < dishList.length; i++) {
                    arr[i] = 0;
                }
                if (dishList.length > 0) {
                    let str = '';
                    for (let i = 0; i < dishList.length; i++) {
                        let u = dishList[i];
                        let dishName = '<img id="showImg" src="../../static/dish/images/menu/' + u.dishName + '.jpg"/>';
                        str += '<li>' +
                            '<span>' + dishName + '</span>' +
                            '<h2>'  + u.dishName + '  价格:' + u.dishPrice + '</h2>' +
                            '<p>' + '<button class="but" type="button" onclick="dianCai(' + i + ')"> 添加 </button>' +
                            '<button class="but" type="button" onclick="jianCai(' + i + ')"> 减少 </button>' +
                            '</p>' +
                            '</li>';
                    }

                    $('#menu').html(str);
                } else {
                    //    无数据
                    $('#menu').html('没有数据');
                }
            }, error: function () {
                alert("服务器错误！");
            }
        })
    }

    function dianCai(id) {
        if(confirm("你确定要点这个菜吗？")) {
            arr[id] += 1;
        }
    }

    function jianCai(id) {
        if(confirm("你确定退点这个菜吗？")) {
            if(arr[id] > 0) arr[id] --;
        }
    }

    function queryByName() {
        //    做ajax请求
        $.ajax({
            url: 'queryByName',
            dataType: 'json',
            type: 'post',
            //同步
            async: false,
            data: {
                name: $("#menuName").val()
            },
            success: function (data) {
                let dishList = data.dishList;
                localStorage.setItem('dishList', JSON.stringify(dishList));
                if (dishList.length > 0) {
                    let str = '';
                    for (let i = 0; i < dishList.length; i++) {
                        let u = dishList[i];
                        let dishName = '<img id="showImg" src="../../static/dish/images/menu/' + u.dishId + u.dishName + '.jpg"/>';
                        str += '<li>' +
                            '<span>' + dishName + '</span>' +
                            '<h2>'  + u.dishName + '  价格:' + u.dishPrice + '</h2>' +
                            '<p>' + '<button class="but" type="button" onclick="dianCai(' + i + ')"> 添加 </button>' +
                            '<button class="but" type="button" onclick="jianCai(' + i + ')"> 减少 </button>' +
                            '</p>' +
                            '</li>';
                    }

                    $('#menu').html(str);
                } else {
                    //    无数据
                    $('#menu').html('没有数据');
                }
            }, error: function () {
                alert("服务器错误！");
            }
        })
    }
    function submitOrder() {
        localStorage.setItem("arr", JSON.stringify(arr));
        x_admin_show('提交订单' ,'submitOrderUI', 800, 600);
        for(let i = 0; i < arr.length; i++) {
            arr[i] = 0;
        }
    }
</script>
</html>
